<template>
  <div>


    <div>
      <input type="text" v-model="content">
      <button @click="add">添加</button>
    </div>
    <ul>
      <TransitionGroup enter-active-class="animate__animated animate__backInDown"
        leave-active-class="animate__animated animate__backOutDown">
        <li v-for="(item, index) in users" :key="item.id">
          <span>{{ item.name }}</span>
          <span @click="del(index)">x</span>
        </li>
      </TransitionGroup>
    </ul>


    <transition>
      <div class="box" v-if="isShow"></div>
    </transition>
    <button @click="isShow = !isShow">按钮</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isShow = ref(true);
const users = ref([])
const content = ref('')

const add = () => {
  users.value.push({ id: Date.now(), name: content.value })
  content.value = '';
}
const del = (index) => {
  users.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.box {
  height: 100px;
  width: 100px;
  background-color: #000;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  transform: scale(0);
  opacity: 0;
}

.v-enter-to,
.v-leave-from {
  transform: scale(1);
  opacity: 1;
}
</style>